<template>
  <div class="article-card" @click="$emit('click', article)">
    <div class="thumb-wrap" v-if="article.coverImage">
      <img :src="article.coverImage" :alt="article.title" class="thumb" loading="lazy" />
    </div>
    <div class="body">
      <h3 class="title" :title="article.title">{{ article.title }}</h3>
      <p class="desc" v-if="article.description">{{ article.description }}</p>
      <div class="meta">
        <span class="author" v-if="article.authorName">{{ article.authorName }}</span>
        <span class="stat">浏览 {{ article.viewCount }}</span>
        <span class="stat">收藏 {{ article.favoriteCount }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { ArticleSummary } from '@/types/Article'
const props = defineProps<{ article: ArticleSummary }>()
</script>
<style scoped>
.article-card { display:flex; gap:16px; padding:16px 8px; border-bottom:1px solid #f1f5f9; cursor:pointer; transition:background .15s; }
.article-card:hover { background:#f9fafb; }
.thumb-wrap { width:160px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.thumb { width:160px; height:120px; object-fit:cover; border-radius:6px; box-shadow:0 2px 4px rgba(0,0,0,.06); }
.body { flex:1; min-width:0; }
.title { font-size:18px; line-height:1.3; margin:0 0 6px; font-weight:600; color:#111827; }
.desc { margin:0 0 10px; font-size:14px; color:#4b5563; line-height:1.5; max-height:42px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; line-clamp:3; }
.desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; line-clamp: 3; }
.meta { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:#64748b; }
.author { font-weight:500; color:#0d9488; }
.stat { position:relative; padding-left:0; }
</style>
